
body{
  padding:0;
  margin:0;
}

@media (min-width:800px) {
  .container{

    min-width: 500px;
    max-width: 800px;
    min-height: 500px;
    margin:0 auto;
  }

  .container > header {
     /*border:1px solid transparent;*/
     padding:15px;
     border-radius: 20px 20px 0 0 ;
     background-color: #efefef;
  }

  .container > header hgroup {
    /*padding-top:1px;*/
  }

  .container > header h1{
  }



  .container > nav {
    background:linear-gradient(black,#eee);
  }

  .container > nav > ul > li{
    list-style: none;
    display: inline-block;
    position: relative;
  }
  .container > nav > a{
    display:none;
  }

  .container > nav > ul > li:hover > ul{
      display:block;
  }

  .container > nav > ul > li > ul {
     display:none;
     width: 150px;
     padding:0;
     margin:0;
     position: absolute;
     top: 30px;
     background:linear-gradient(to bottom,#eee,black);
  }

  .container > nav > ul > li > ul > li {
    list-style: none;
    margin:0px;
    padding:0px;
  }



  .container > nav > ul > li > ul > li:hover > ul {
      display:block;
  }


  .container > nav > ul > li > ul > li > ul {
     display:none;
     width: 150px;
     padding:0;
     margin:0;
     position: absolute;
     left: 150px;
     top: 30px;
     background:linear-gradient(to bottom,#eee,black);
  }

  .container > nav > ul > li > ul > li > ul > li {
    list-style: none;
    margin:0px;
    padding:0px;
  }




  .container > nav  a {
     text-decoration: none; /* 清除掉 a 的下划线 */
     line-height: 30px;
     padding: 10px;
  }

  a:link , a:visited , a:active {
     color: #fff;

  }

  a:hover {
     font-size: 13pt;
  }


  .main {
    border:1px solid #eee;
    min-height: 300px;
  }

  .product-list > .product {

    display: inline-block;
    margin: 8px;
    text-align: center;
    width:80px;
    height:120px;
    border:1px solid #eee;
  }

  .product h4{
    margin:3px;
  }

  .product > img{
    width:70px;
    height: 60px;
  }

  .product > p {
    margin:3px;
    font-size:9pt;
    color: #666;
  }


}

@media (max-width:799px){
  .container{

    min-width: 500px;
    max-width: 800px;
    min-height: 500px;
    margin:0 auto;
  }

  .container > header {
     /*border:1px solid transparent;*/
     padding:15px;
     border-radius: 20px 20px 0 0 ;
     background-color: #efefef;
  }

  .container > header hgroup {
    /*padding-top:1px;*/
  }

  .container > header h1{
  }

  .container > nav {
    background:linear-gradient(black,#eee);
  }

  .container>nav>ul{
    padding-left:10px;
    display:none;
  }

  .container>nav>ul.open {
     display:block;
  }

  .container>nav>ul>li>ul.open1 {
     display:block;
  }



  .container > nav > ul > li{
    list-style: none;
    display: block;
    position: relative;
  }

   /* .container > nav > ul > li:hover > ul{
      display:block;

  }  */

  .container > nav > ul > li > ul {
     display:none;

     width: 150px;


     /* min-width: 500px; */
     padding:0;
     margin:0;
     position: absolute;
     top: 30px;
     background:linear-gradient(to bottom,#eee,black);
  }

  .container > nav > ul > li > ul > li {
    list-style: none;
    margin:0px;
    padding:0px;
  }


  /* ul ul {

    margin:0;
    background:#bfbfbf;
    visibility:hidden;
    padding:0 12px;
    position:relative;
    height: 0;
  }

  ul > li:hover > ul {
    height: auto;
    visibility:visible;

    width:190px;

  } */







  .container > nav > ul > li > ul > li:hover > ul {
      display:block;
  }


  .container > nav > ul > li > ul > li > ul {
     display:none;

     width: 150px;
     padding:0;
     margin:0;
     position: absolute;
     left: 150px;
     top: 30px;
     background:linear-gradient(to bottom,#eee,black);
  }

  .container > nav > ul > li > ul > li > ul > li {
    list-style: none;
    margin:0px;
    padding:0px;
  }




  .container > nav  a {
     text-decoration: none; /* 清除掉 a 的下划线 */
     line-height: 30px;
     padding: 10px;
  }

  .container > nav > a{
    display:block;
  }

  a:link , a:visited , a:active {
     color: #fff;

  }

  a:hover {
     font-size: 13pt;
  }


  .main {
    border:1px solid #eee;
    min-height: 300px;
  }

  .product-list > .product {

    display: inline-block;
    margin: 8px;
    text-align: center;
    width:100px;
    height:130px;
    border:1px solid #eee;
  }

  .product h4{
    margin:3px;
  }

  .product > img{
    width:90px;
    height: 70px;
  }

  .product > p {
    margin:3px;
    font-size:14pt;
    color: #666;
  }
}
